<template>
  <div>
    <Row>
      <i-col span="14" class="management_left_box">
        <div class="Job_box">
          <!-- 添加职位组件 -->
          <div id=add_box>
            <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
              <FormItem prop="user">
                  <i-input type="text" v-model="formInline.user" placeholder="name" clearable>
                      <Icon type="ios-person-outline" slot="prepend"></Icon>
                  </i-input>
              </FormItem>
              <FormItem>
                  <Button type="primary" @click="handleSubmit('formInline')">增加职位</Button>
              </FormItem>
            </Form>
          </div>
          <div class="chang_box" v-show="showBox==1">
            <p>是否确定添加该职位！</p>
            <Button type="primary" style="margin-right:1vw;" @click='add_btn'>确定添加</Button>
            <Button type="error" @click='hidden'>取消</Button>
          </div>
          <!-- 打印职位 -->
          <Table border :columns="columns12" :data="data6">
            <template slot-scope="{ row }" slot="jid">
                <strong>{{ row.jid }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" style="margin-right: 5px" @click="show(index)">修改</Button>
                <Button type="error" style="margin-right: 5px" @click="remove(index)">删除</Button>
                <Button type="error" @click="guanLi(index)">权限管理</Button>
            </template>
          </Table>
          <p class="job_p1"><Page :total="allTotal" :page-size="page" @on-change='getPage'/> </p>  
        </div>
      </i-col>
      <i-col span="7" class="management_right_box">
        <Tree :data="data4" show-checkbox ></Tree>
        <Button type="error" @click="tiJiao_btn">提交权限</Button>
      </i-col>
    </Row>
  </div>
</template>

<script>
  // import JobAdd from './comps/jobAdd/JobAdd'
 import {getManagement} from '../../../server/home'
    export default {
        // components: {
        //   JobAdd,
        // },
        data () {
            return {
                columns12: [//表格标题菜单
                    {
                        title: 'ID',
                        slot: 'jid',
                        width:60,
                        align:'center',
                        // key:'id'
                    },
                    {
                        title: '职位名称',
                        key: 'name',
                        align:'center',
                        width:200,
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        align: 'center'
                    }
                ],
                data6: [],//表格数据
                allTotal:20,//总页数
                page:5,//每页显示数量
                nowPage:0,//传给后台Limin开始下标
                data4: [
                    {
                        title: '目录权限',
                        expand: false,
                        selected: false,
                        checked:false,
                        children: []
                    }
                ],
                tiJiao:-1,
                changeIndex:-1,
                showBox:0,
                formInline: {
                    user: '',
                },
                ruleInline: {
                    user: [
                        { required: true, message: '请输入增加职位名', trigger: 'blur' },
                        { pattern: /^((?![\u3000-\u303F])[\u2E80-\uFE4F]|\·)*(?![\u3000-\u303F])[\u2E80-\uFE4F](\·)*$/, message: '请输中文名字', trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
            show (index) {//显示修改框
              if(this.data6[index].jid==1){
                this.$Message.error('该为超级管理员，无法修改');
                return;
              }
              var them=this;
              this.$Modal.confirm({
                  title: '是否修改',
                  content: `id：${this.data6[index].jid}<br>name：${this.data6[index].name}<br><input type="text" id='xiuGai'>`,
                  // render
                  cancelText:'取消',
                  okText:'确认',
                  onOk: function(){
                    var xiuGai = document.getElementById('xiuGai').value;
                    var pattern = new RegExp("[\u4E00-\u9FA5]+");
                    if(pattern.test(xiuGai)==false){
                      this.$Notice.warning({
                        title:"请输入中文",
                      })
                      return;
                    }
                    var changeData={
                      nameText:xiuGai,
                      xiaBiao:them.data6[index].jid,
                    }
                    getManagement('admin/management/changeManage',changeData).then(res=>{
                      if(res.err_code==1000){
                        this.$Modal.info({
                          title:res.message,
                          cancelText:"确定",
                        })
                        them.allTotal=res.data[1];
                        them.data6[index].name=xiuGai;
                      }else{
                        alert(res.message);
                      }
                    })
                  }
              });
            },
            remove (index) {//删除
                if(this.data6[index].jid==1){
                  this.$Message.error('该为超级管理员，无法删除');
                  return;
                }
                var them = this;
                this.$Modal.confirm({
                  title: '是否删除',
                  content: `id：${this.data6[index].jid}<br>name：${this.data6[index].name}`,
                  // render
                  cancelText:'取消',
                  okText:'确认',
                  onOk: function(){
                    var removeData = {
                      jid : them.data6[index].jid,
                    };
                    getManagement('admin/management/del',removeData).then(res=>{
                      if(res.err_code==1000){
                        them.data6.splice(index,1);
                      }
                      this.$Modal.info({
                        title:res.message,
                        cancelText:"确定"
                      })
                    })
                  }
                });
            },
            guanLi (index) {//权限管理
              this.tiJiao=this.data6[index].jid;//提交按钮获取该下标
              this.changeIndex=index;
              var menuArr=[];//职位对应的菜单
              var newArr = this.data6[index].menu_id.split(",");
              for(var i=0;i<newArr.length;i++){
                menuArr.push(parseInt(newArr[i]));
              }
              getManagement('admin/management/getMenu').then(res=>{
                this.data4[0].children = [];
                this.data4[0].checked = false;
                this.data4[0].expand = true;
                for(var i=0;i<res.data.length;i++){
                  if(res.data[i].fid==0){
                    if(menuArr.indexOf(res.data[i].mid)>-1){
                      var fData = {
                        title:res.data[i].name,
                        id:res.data[i].mid,
                        expand: false,
                        checked:true,
                        children:[]
                      };
                    }else{
                      var fData = {
                        title:res.data[i].name,
                        id:res.data[i].mid,
                        expand: false,
                        checked:false,
                        children:[]
                      };
                    }
                    for(var y=0;y<res.data.length;y++){
                      if(res.data[y].fid==res.data[i].mid){
                        if(menuArr.indexOf(res.data[y].mid)>-1){
                          var zData = {
                          title:res.data[y].name,
                          id:res.data[y].mid,
                          checked: true,
                          };
                          fData.children.push(zData); 
                        }else{
                          var zData = {
                          title:res.data[y].name,
                          id:res.data[y].mid,
                          checked: false,
                          };
                          fData.children.push(zData); 
                        }
                          
                      }
                    } 
                    this.data4[0].children.push(fData);        
                  }
                }
              })
            },
            tiJiao_btn(){//修改权限
              if(this.tiJiao==-1){
                this.$Modal.info({
                  title: '请选择要修改权限的职位',
                  cancelText:'取消',
                });
              }else{
                if(this.tiJiao==1){
                  this.$Message.error('该为超级管理员，无法修改');
                  return;
                }
                var them = this;
                var newMenuArr = [];
                this.$Modal.confirm({
                  title: '是否修改该权限？',
                  cancelText:'取消',
                  okText:'确认',
                  onOk: function(){

                    for(var z=0;z<them.data4[0].children.length;z++){
                      if(them.data4[0].children[z].children.length >0){
                        for(var c=0;c<them.data4[0].children[z].children.length;c++){
                          if(them.data4[0].children[z].children[c].checked==true){
                            newMenuArr.push(them.data4[0].children[z].children[c].id);
                          }
                        };
                      }else{
                        if(them.data4[0].children[z].checked==true){
                          newMenuArr.push(them.data4[0].children[z].id);
                        }
                      }
                    }
                    var menuId = newMenuArr.toString();
                    var menuDate = {
                      id:them.tiJiao,
                      menu:menuId,
                    };
                    getManagement('admin/management/changeId',menuDate).then(res=>{
                      this.$Modal.info({
                        title:res.message,
                        cancelText:"确定",
                      })
                      them.data6[them.changeIndex].menu_id=menuId;
                      them.data4[0].expand=false;
                    })
                  }
                });
              }
            },
            getPage (pageRes){//点击分页
              const newPage = parseInt((pageRes-1)*this.page);
              this.nowPage = newPage;
              var viewData={
                page :this.nowPage,
              };
              getManagement('admin/management/select',viewData).then(res=>{
                  this.data6=res.data[0];
              })
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                      this.showBox=1
                    } else {
                      this.$Message.error('Fail!');
                    }
                })
            },
            hidden() {
              this.showBox=0;
            },
            add_btn() {
              var data= {
                'name':this.formInline.user,
              }
              getManagement('admin/management/addManage',data).then(res=>{
                alert(res.message);
              })
              var viewData={
              page :this.nowPage,
            };
              getManagement('admin/management/select',viewData).then(res2=>{
               this.allTotal=res2.data[1];
                this.data6=res2.data[0];
              });
              this.showBox=0;
            }
        },
        created() {
            var viewData={
              page :this.nowPage,
            };
           getManagement('admin/management/select',viewData).then(res=>{
             this.allTotal=res.data[1];
             this.data6=res.data[0];
            });
            getManagement('admin/management/getMenu').then(res=>{
              for(var i=0;i<res.data.length;i++){
                if(res.data[i].fid==0){
                  var fData = {
                      title:res.data[i].name,
                      id:res.data[i].mid,
                      expand: false,
                      checked:false,
                      children:[]
                  };
                  for(var y=0;y<res.data.length;y++){
                    if(res.data[y].fid==res.data[i].mid){
                      var zData = {
                        title:res.data[y].name,
                        id:res.data[y].mid,
                        checked: false,
                      };
                      fData.children.push(zData);  
                    }
                  }
                  this.data4[0].children.push(fData);
                }
              }
            })
        }
    }
</script>

<style scoped>
  .management_box{
    height: 100%;
  }
  .management_left_box{
    min-width: 46vw;
  }
  .management_right_box{
    margin-left: 6vw;
    padding-top:1vw;
  }
  .job_p1{
    margin-top:1vw;
    text-align: center;
  }
  #add_box{
    z-index: 2;
    border-radius: 8px 8px;
}
.chang_box{
    width: 16vw;
    border: 1px solid;
    position: absolute;
    z-index: 1;
    left: 29vw;
    background-color: white;
    top: 9vw;
    text-align: center;
    padding-top: 1vw;
    padding-bottom: 1vw;
    border-radius: 8px 8px;
}
.chang_box p{
  margin-bottom: 1vw;
    font-size: 1.5vw;
    font-family: 楷体;
}
</style>
